@charset "UTF-8";








@media screen  and (max-width: 1300px){

    #main #us .ab-content{
        height: auto;
    }

    #main #us .ab-content .contact{
        height: calc((800/192)*1rem);

    }


}






@media screen  and (max-width: 950px){

    #main #us{

    }
    #main #us .u-nav{
        flex-wrap: wrap;
        justify-content: space-between;
        width: 100%;
        height: auto;
        padding-bottom: calc((100/192)*1rem);
    }

    #main #us .u-nav li{
        width: calc((500/192)*1rem);
        margin: unset;
        font-size: 16px;
    }
    #main #us .u-nav li:nth-child(4) div{
        margin-left: calc((60/192)*1rem);
    }

    #main #us .u-nav li:nth-child(1) div h3{
        width: calc((174/192)*1rem);
        height: calc((174/192)*1rem);
        background-image: url("../img/about1.png");
    }
    #main #us .u-nav li:nth-child(2) div h3{
        width: calc((177/192)*1rem);
        height: calc((175/192)*1rem);
        background-image: url("../img/teacher1.png");
    }
    #main #us .u-nav li:nth-child(3) div h3{
        width: calc((160/192)*1rem);
        height: calc((175/192)*1rem);
        background-image: url("../img/customer1.png");
    }
    #main #us .u-nav li:nth-child(4) div h3{
        width: calc((177/192)*1rem);
        height: calc((175/192)*1rem);
        background-image: url("../img/results1.png");
    }
    #main #us .u-nav li:nth-child(5) div h3{
        width: calc((173/192)*1rem);
        height: calc((173/192)*1rem);
        background-image: url("../img/history1.png");
    }
    #main #us .u-nav li:nth-child(6) div h3{
        width: calc((193/192)*1rem);
        height: calc((175/192)*1rem);
        background-image: url("../img/culture1.png");
    }

    #main #us .u-nav li div p{
        white-space: nowrap;
    }

    #main #us .ab-content .ab-us{
        width: 100%;
        height: auto;
    }

    #main #us .ab-content .ab-us h4{
        font-size: 20px;
    }
    #main #us .ab-content .ab-us p{
        font-size: 14px;
    }
    #main #us .ab-content .ab-us .top{
        width: 100%;
    }
    #main #us .ab-content .ab-us .top >div{
        float: none;
    }
    #main #us .ab-content .ab-us .top .t-left{
        width: 100%;

    }

    #main #us .ab-content .ab-us .top .t-left h5,
    #main #us .ab-content .ab-us .bottom .b-right h5{

        height: calc((288/192)*1rem);
        line-height:calc((288/192)*1rem);
        font-size: 20px;
    }
    #main #us .ab-content .ab-us .top .t-left h5{
        width: calc((450/192)*1rem);
    }
    #main #us .ab-content .ab-us .bottom .b-right h5{
        width: calc((300/192)*1rem);
    }
    #main #us .ab-content .ab-us .top .t-right{
        width: 100%;
    }
    #main #us .ab-content .ab-us .top .t-right p,
    #main #us .ab-content .ab-us .bottom .b-left p {
        width: 90%;
        margin: auto;
        font-size: 14px;
        text-align: justify;
        text-indent: 32px;
        line-height: calc((140/192)*1rem);
    }
    #main #us .ab-content .ab-us .bottom{
        position: relative;
        width: 100%;
        margin-top: 0;
    }
    #main #us .ab-content .ab-us .bottom .b-left{
        width: 100%;
        padding-top: calc((500/192)*1rem);
    }
    #main #us .ab-content .ab-us .bottom .b-right{
        position: absolute;
        width: 100%;
        height: calc((450/192)*1rem) ;
    }

    #main #us .ab-content .contact{
        height: auto;
        padding-bottom: calc((50/192)*1rem);
    }
    #main #us .ab-content .contact >div{
        width: 50%;
        margin: unset;
        margin-left: 20px;
    }
    #main #us .ab-content .contact >div div{
        float: none;
    }
    #main #us .ab-content .contact >div .left{
        width: 100%;
    }
    #main #us .ab-content .contact >div .left h4{
        width: 100%;
        height: calc((600/192)*1rem);
    }
    #main #us .ab-content .contact >div .left p{
        font-size: 20px;
    }
    #main #us .ab-content .contact >div .right{
        font-size: 16px;
        line-height: calc((50/192)*1rem);
    }
    #main #us .ab-content .contact >div .right P{
        line-height: calc((110/192)*1rem);
        font-size: 12px;
    }

    #main #us .teacher{
        height: auto;
    }
    #main #us .teacher .t-content .t-pic{
        width: 100%;
    }
    #main #us .teacher .t-content .t-pic h4{
        font-size: 20px;
    }
    #main #us .teacher .t-content .t-pic p:nth-of-type(1){
        font-size: 16px;
    }
    #main #us .teacher .t-content .t-pic p + p{
        width: 85%;
        margin: auto;
        font-size: 14px;
        line-height: calc((120/192)*1rem);
        text-align: justify;
        text-indent: 28px;
    }
    #main #us .teacher .t-content .t-pic .t-list{
        height: auto;
    }
    #main #us .teacher .t-content .t-list ul li{
        width: 50%;
        padding-bottom: calc((50/192)*1rem);
    }
    #main #us .teacher .t-content .t-pic .t-list ul li div{
        width: 100%;
        height:calc((1139/192)*1rem) ;
    }
    #main #us .teacher .t-content .t-pic .t-list ul li > p{
        font-size: 16px;
    }
    #main #us .teacher .t-content .t-pic .t-list ul li div p a{
        width: 70%;
        margin-top: calc((300/192)*1rem);
        font-size: 16px;
        line-height:calc((100/192)*1rem) ;
    }
    #main #us .teacher .btn{
        height: auto;
    }
    #main #us .teacher .btn .center{
        display: flex;
        width: 80%;
        justify-content: space-around;
    }
    #main #us .teacher .btn .center .prv,
    #main #us .teacher .btn .center .next,
    #main #us .teacher .btn .center ul li{
        padding: calc((20/192)*1rem)  calc((30/192)*1rem) ;
        font-size: 16px;
    }

    #main #us .customer .c-content .t-pic .c-list ul li{
        width: 30%;
        height: calc((350/192)*1rem);
    }

    #main #us .customer .c-content{
        height:auto;
    }
    #main #us .customer .c-content .t-pic{
        height: auto;
    }
    #main #us .result{
        height: auto;
    }
    #main #us .result .r-title{
        width: 100%;
        height: auto;
    }
    #main #us .result .r-title .rt-content{
        width: 100%;
    }
    #main #us .result .r-title .rt-content h4{
        font-size: 20px;
    }
    #main #us .result .r-title .rt-content > p:nth-of-type(1){
        font-size: 16px;
    }
    #main #us .result .r-title .rt-content > p:nth-of-type(2),
    #main #us .result .r-title .rt-content > p:nth-of-type(3){
        width: 85%;
        margin: auto;
        font-size: 14px;
        line-height: calc((100/192)*1rem);
        text-indent: 24px;
        text-align: justify;
    }
    #main #us .result .r-title .rt-content .toggle{

        height: calc((100/192)*1rem);
        margin-bottom:calc((100/192)*1rem) ;
    }
    #main #us .result .r-title .rt-content .toggle li p{
        font-size: 12px;
    }
    #main #us .result .r-title .rt-content .banner{
        width: 100%;
        height: auto;
    }
    #main #us .result .r-title .rt-content .banner ul{
        width:calc((5618/192)*1rem);
    }
    #main #us .result .r-title .rt-content .banner ul li:nth-child(1){
        width:calc((500/192)*1rem);
    }

    #main #us .result .r-title .rt-content .banner ul li{
        width: calc((499/192)*1rem);
        height: calc((370/192)*1rem);
    }
    #main #us .result .r-title .rt-content .banner ul li i{
        width: calc((370/192)*1rem);
        height: calc((370/192)*1rem);
    }
    #main #us .result .r-title .rt-content .banner ul li span{
        width: calc((129/192)*1rem);
        height: calc((19/192)*1rem);
    }
    #main #us .result .r-bottom{
        width: 100%;
    }
    #main #us .result .r-bottom ul li .left, #main #us .result .r-bottom ul li .right{
        float: none;
        width: 100%;
    }
    #main #us .result .r-bottom ul li .left img{
       height: auto;
    }
    #main #us .result .r-bottom ul li img{
        width: 100%;
    }
    #main #us .result .r-bottom ul li .right img{
        height: auto;
    }
    #main #us .result .r-bottom ul li h5{
        font-size: 20px;
    }
    #main #us .result .r-bottom ul li p{
        width: 90%;
        margin: auto;
        font-size: 16px;
        line-height: calc((120/192)*1rem);
    }
    #main #us .history{
        height: auto;
    }
    #main #us .history h4{
        font-size: 20px;
    }
    #main #us .history > p{
        font-size: 16px;
    }
    #main #us .history .h-content{
        width: 100%;
    }
    #main #us .history .h-content .hc-title{
        width: 100%;
        font-size: 15px;
    }
    #main #us .history .h-content .hc-title li{
        width: 33%;
    }

    #main #us .history .h-content .left,
    #main #us .history .h-content .right{
        float: none;
    }

    #main #us .history .h-content .left{
        width: 90%;
        margin: auto;
        line-height: calc((130/192)*1rem);
        font-size: 14px;
    }
    #main #us .history .h-content .left h5{
        font-size: 14px;
    }

    #main #us .history .h-content .right{
        width: 100%;
    }
    #main #us .history .h-content .right li > div,
    #main #us .history .h-content .right li > ul{
        float: none;
    }
    #main #us .history .h-content .right li > div{
        width: 10%;
        font-size: 14px;
        margin: auto;
    }
    #main #us .history .h-content .right li > ul{
        width: 100%;
    }
    #main #us .history .h-content .right li > ul li{
        width: 100%;
        font-size: 14px;
        line-height: calc((140/192)*1rem);

    }
    #main #us .history .h-content .right li > ul li +li{
        margin-bottom: 10px;
    }
    #main #us .history .h-content .right li ul li span{
        width: 20%;
        text-align: center;
        vertical-align: middle;
    }
    #main #us .history .h-content .right li ul li p{
        width: 75%;
        text-align: justify;
        text-indent: 30px;
        vertical-align: middle;
    }
    #main #us .culture > p, #main #us .culture h4{
        font-size: 20px;
    }

    #main #us .culture .pic{
        width: 100%;
        height: auto;
    }
    #main #us .culture .pic li{
        width: 95%;
        height: auto;
    }
    #main #us .culture .pic li h5{
        font-size: 16px;
    }
    #main #us .culture .pic li h5 span{
        font-size: 18px;
    }
    #main #us .culture .pic p{
        font-size: 16px;
        line-height: calc((130/192)*1rem);
    }
    #main #us .culture img{
        width: 100%;
        height: auto;
    }
    #main #us .culture .btn{
        height: auto;
    }
    #main #us .culture .btn .center{
        display: flex;
        width: 80%;
        justify-content: space-around;
        padding-bottom: calc((63/192)*1rem);
    }
    #main #us .culture .btn .center .prv,
    #main #us .culture .btn .center .next,
    #main #us .culture .btn .center ul li{
        padding: calc((20/192)*1rem)  calc((30/192)*1rem) ;
        font-size: 16px;
    }

}


@media screen  and (max-width: 450px){
    #main #us .u-nav li{
        font-size: 14px;
    }
}






























